<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Declare a new AngularJS app and associate the controller -->
    <form  class="ng-cloak" ng-controller="OrderFormController">
        <h1>Services</h1>
        <ul>
            <!-- Loop through the services array, assign a click handler, and set or
			remove the "active" css class if needed -->
            <li ng-repeat="service in services" ng-click="toggleActive(service)" ng-class="{active:service.active}">
                <!-- Notice the use of the currency filter, it will format the price -->
                {{service.name}} <span>{{service.price | currency}}</span>
            </li>
        </ul>
        <div class="total">
            <!-- Calculate the total price of all chosen services. Format it as currency. -->
            Total: <span>{{total() | currency}}</span>
        </div>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    <script>
        var app = angular.module('app', []);
        app.controller('OrderFormController', function($scope) {
            // Define the model properties. The view will loop
            // through the services array and genreate a li
            // element for every one of its items.
            $scope.services = [{
                name: 'Web Development',
                price: 300,
                active: true
            }, {
                name: 'Design',
                price: 400,
                active: false
            }, {
                name: 'Integration',
                price: 250,
                active: false
            }, {
                name: 'Training',
                price: 220,
                active: false
            }];
            $scope.toggleActive = function(s) {
                s.active = !s.active;
            };
            // Helper method for calculating the total price
            $scope.total = function() {
                var total = 0;
                // Use the angular forEach helper method to
                // loop through the services array:
                angular.forEach($scope.services, function(s) {
                    if (s.active) {
                        total += s.price;
                    }
                });
                return total;
            };
        });
    </script>
</body>

</html>
